import { Component, Vue, Mixins, Watch } from 'vue-property-decorator'
// import TabBar from '../../components/TabBar/TabBar.vue'
import grayScaleMixin from '@/moduleC/mixins/grayScale'
// import DATATEST from '../../moduleA/mixins/data.js'

import { mockCollectionList,  mockMyOrderList } from '@/moduleC/api/mock'
import store from '@/moduleC/store'
import { State } from 'vuex-class'
// import { defineComponent, ref, computed } from 'vue'
// import { useStore } from 'vuex'
// Move interfaces outside the class for better organization
interface UniSystemInfo {
	statusBarHeight: number
	// ... other properties
}

interface UserInfo {
	name: string
	avatar: string
	id: string
	location: string
	points: number
	level: number
	coupons: number
}

interface GridItem {
	name: string
	icon: string
	type: string
	img: string
}

interface TabBarItem {
	index: number
	name: string
	img: string
	acImg: string
}

interface Response {
	// 定义响应类型
	[key: string]: any;
}

interface Error {
	// 定义错误类型
	message: string;
	[key: string]: any;
}

@Component({
	components: {
		// TabBar,
	}
})
export default class My extends Mixins(grayScaleMixin) {
	// 使用 vuex-class 的装饰器来绑定 store 状态
	@State('userToken') storeToken!: any
	@State('user') storeUser!: any

	public statusBarHeight = 0
	public show = true
	public showModal = false
	public TabBarList: TabBarItem[] = [
		{
			index: 0,
			name: '另品网',
			img: '/static/tabBar/tab_01.png',
			acImg: '/static/tabBar/tab_02.png'
		},
		
		{
			index: 1,
			name: '好友',
			img: '/static/tabBar/tab_07.png',
			acImg: '/static/tabBar/tab_08.png'
		},
		{
			index: 2,
			name: '我的',
			img: '/static/tabBar/tab_09.png',
			acImg: '/static/tabBar/tab_10.png'
		},
	]

	public qrCodeUrl: string = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=example'
	public shangjia: GridItem[] = [
		{
			name: '商家管理',
			icon: 'icon-dianpuguanli',
			type: 'storeManagement',
			img: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/store.png'
		},
		{
			name: '收款码',
			icon: 'icon-erweima',
			type: 'collection',
			img: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/paycode.png'
		},
		{
			name: '积分比例',
			icon: 'icon-jifenbili',
			type: 'integral',
			img: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/jifen.png'
		},
	]
	public functions: GridItem[] = [
		{
			name: '转发推广',
			icon: 'icon-zhuanfa',
			type: 'share',
			img: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/share.png'
		},
		{
			name: '扫码付款',
			icon: 'icon-saoma',
			type: 'scan',
			img: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/scren.png'
		},
		{
			name: '排队免单',
			icon: 'icon-paidui',
			type: 'queue',
			img: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/miandan.png'
		},
		{
			name: '消费抽奖',
			icon: 'icon-choujiang',
			type: 'lottery',
			img: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/lottery.png'
		},
		{
			name: '我的收藏',
			icon: 'icon-shoucang1',
			type: 'favorite',
			img: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/favorite.png'
		}
	]
	public orders: GridItem[] = [
		{
			name: '订单',
			icon: 'icon-dingdan',
			type: 'order',
			img: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/order.png'
		}
	]

	get userInfo(): any {
		return this.storeUser
	}

	get userToken(): any {
		return this.storeToken
	}


	// Lifecycle hooks
	onShow(): void {
		// this.isLogin = !!uni.getStorageSync('_login')
		// if(this.isLogin && !uni.getStorageSync('_UserInfo')){
		// 	uni.setStorageSync('_UserInfo', this.userInfo)
		// }
	}

	onLoad(): void {
		const systemInfo = uni.getSystemInfoSync() as UniSystemInfo
		this.statusBarHeight = systemInfo.statusBarHeight || 0
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#4B7BF9'
		})
		uni.setStorageSync('_collectionList', mockCollectionList)
		uni.setStorageSync('_orderList',mockMyOrderList)
	}

	// Methods
	async getPhoneNumber(e: any): Promise<void> {
		try {
			if (e.detail.errMsg === 'getPhoneNumber:ok') {
				uni.showLoading()
				await new Promise<void>(resolve => setTimeout(resolve, 1000))
				uni.hideLoading()
				await store.dispatch('fetchUserInfo')
				await store.dispatch('setStoreData', {
					_key: 'userToken',
					_val: new Date().getTime()
				})
			} else {
				uni.showToast({
					title: '获取手机号失败',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('Phone number error:', error)
			uni.showToast({
				title: '获取手机号失败',
				icon: 'none'
			})
		}
	}

	switchtab(): void {
		uni.navigateTo({
			url: '/moduleC/pages/setting/setting'
		})
	}

	gotoLink(url: string): void {
		uni.navigateTo({
			url: url
		})
	}

	handleFunction(type: string): void {
		uni.showToast({
			title: `点击了${type}功能`,
			icon: 'none'
		})
	}

	shangjiaOrder(type: string): any {
		if (!this.storeToken) return uni.showToast({
			title: '请先登陆',
			icon: 'error'
		})
		switch (type) {
			case 'storeManagement':
				uni.navigateTo({
					url: '/moduleB/storeManagement/storeManagement'
				})
				break
			case 'collection':
				this.showQRCode()
				break
			case 'integral':
			
				uni.navigateTo({
					url: '/moduleC/pages/integral/integral'
				})
				break
		}
	}

	handleOrder(type: string): any {
		if (!this.storeToken) return uni.showToast({
			title: '请先登陆',
			icon: 'error'
		})
		switch (type) {
			case 'order':
				uni.navigateTo({
					url: '/moduleC/pages/order/index'
				})
				break
			case 'queue':
				// uni.navigateTo({
				// 	url: '/moduleA/queueFree/index'
				// })
				uni.navigateTo({
					url: '/moduleC/pages/queueFree/index'
				})
				break
			case 'favorite':
				// uni.navigateTo({
				// 	url: '/moduleA/favorite/index'
				// })
				uni.navigateTo({
					url: '/moduleC/pages/favorite/index'
				})
				break
			case 'scan':
				// uni.navigateTo({
				// 	url: '/moduleA/payment/payment'
				// })
				uni.navigateTo({
					url: '/moduleC/pages/payment/index'
				})
				break
			case 'share':
				uni.navigateTo({
					url: '/moduleC/pages/share/index',
					// '/moduleA/share/share'
				})
				break
			case 'lottery':
				// uni.navigateTo({
				// 	url: '/moduleA/lottery/index'
				// })
				uni.navigateTo({
					url: '/moduleC/pages/lottery/index'
				})
				break
			default:
				uni.showToast({
					title: `点击了${type}`,
					icon: 'none'
				})
				break
		}
	}

	async showQRCode(): Promise<void> {
		this.showModal = true
		await this.generateQRCode()
	}
	onTabBar(item: any,index: number): any{
					console.log(index)
					// this.tabBarShow = index;
					switch (index){
						case 0:
							uni.switchTab({
								url:'/pages/home/home'
							})
							break;
						case 1:
						
							uni.switchTab({
								url:'/pages/friends/friends'
							})
							break;
						case 2:
							uni.switchTab({
									url:'/pages/my/my'
							})
							break;
					
					}
				}
	closeModal(): void {
		this.showModal = false
	}

	async generateQRCode(): Promise<void> {
		try {
			this.qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent('/moduleA/payment/payment')}`
		} catch (e) {
			console.error(e)
		}
	}

	scanCode(): void {
		uni.scanCode({
			success: (res: UniApp.ScanCodeSuccessRes) => {
				console.log('扫码结果：', res.result)
				if (res.result) {
					uni.navigateTo({
						url: `/moduleA/payment/payment?code=${encodeURIComponent(res.result)}`
					})
				}
			},
			fail: (err: UniApp.GeneralCallbackResult) => {
				console.error('扫码失败：', err)
				uni.showToast({
					title: '扫码失败',
					icon: 'none'
				})
			}
		})
	}

	notLogin(): any {
		return uni.showToast({
			title: '请先登陆',
			icon: 'error'
		})
	}

	onChooseAvatar(e: { detail: { avatarUrl: string } }): void {
		const { avatarUrl } = e.detail
		this.userInfo.avatar = avatarUrl
		uni.setStorageSync('_UserInfo', this.userInfo)
		uni.showToast({
			title: '头像更新成功',
			icon: 'success'
		})
	}

	onNicknameInput(e: { detail: { value: string } }): void {
		const nickname = e.detail.value
		if (nickname) {
			this.userInfo.name = nickname
			uni.setStorageSync('_UserInfo', this.userInfo)
			uni.showToast({
				title: '昵称更新成功',
				icon: 'success'
			})
		}
	}

	handleResponse(res: Response) {
		// 处理响应
	}

	handleError(err: Error) {
		// 处理错误
	}
}
